<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="用户"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
    >
      <template #toolbar>
        <el-button-group style="vertical-align: top; margin-right: 10px">
          <el-tooltip placement="left">
            <div slot="content" style="width: 240px; line-height: 1.8">
              使用导入功能时，需注意您选择导入的Excel文件表格表头需要与当前表格表头完全一致（列数，语言，大小写字母，空格字符等），为避免出现不必要的错误，请确认文件符合导入要求。
            </div>
            <el-button type="primary" @click="handleShowImport">
              <svg-icon icon-class="import"></svg-icon>
              导入
            </el-button>
          </el-tooltip>
          <el-tooltip placement="left">
            <div slot="content" style="width: 240px; line-height: 1.8">
              当选中表格数据时，将只导出选中的条目，未选中数据则默认导出表格全部内容
            </div>
            <el-button type="primary">
              <svg-icon icon-class="export"></svg-icon>
              导出
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit()"
        >
          创建用户
        </el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>
      <template #expand="{ row }">
        <el-card shadow="never">
          全部手机号：
          <p>{{ row.numbers.join(',') }}</p>
          备注
          <p>{{ row.remark }}</p>
        </el-card>
      </template>

      <template #gender="{ row }">
        {{ row.gender === 'MALE' ? '男' : '女' }}
      </template>
      <template #numbers="{ row }">
        {{ row.numbers.join(',') }}
      </template>
      <template #tags="{ row }">
        <el-tag v-for="item in row.tags" :key="item" style="margin: 4px">
          {{ item }}
        </el-tag>
      </template>
      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>

      <template #operate="{ row }">
        <el-tooltip content="编辑" placement="top">
          <i
            class="el-icon-edit operate-button"
            @click="handleShowAddEdit(row)"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
      </template>
    </pro-table>

    <!-- 导入用户 -->
    <el-dialog
      v-if="showImport"
      :visible.sync="showImport"
      :close-on-click-modal="false"
      title="导入用户"
      width="520px"
    >
      <import-user @close="showImport = false" />
    </el-dialog>
    <!-- 创建/编辑页面 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showAddEdit"
      direction="rtl"
      size="450px"
      @closed="isAddEdit = false"
    >
      <add-edit
        v-if="isAddEdit"
        :user="selectedRow"
        @close="showAddEdit = false"
      />
    </el-drawer>
  </div>
</template>
<script>
import ImportUser from './components/ImportUser'
import AddEdit from './components/AddEdit'
export default {
  name: 'Users',
  components: { AddEdit, ImportUser },
  data() {
    return {
      showImport: false,
      showPageModal: false,
      selectedRow: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'expand', tdSlot: 'expand' },
        { type: 'selection' },
        {
          label: '名称',
          prop: 'name',
        },
        {
          label: '性别',
          tdSlot: 'gender',
          width: 80,
        },
        {
          label: '手机号',
          tdSlot: 'numbers',
        },
        {
          label: '身份证号码',
          prop: 'idNumber',
        },
        {
          label: '地址',
          prop: 'address',
        },
        {
          label: '邮箱',
          prop: 'email',
        },
        {
          label: '标签',
          tdSlot: 'tags',
          width: 240,
          wrap: true,
        },
        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 120,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: '名称、标签',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  address: 'adsf',
                  createTime: '2022-03-16T05:24:08.000+0000',
                  email: 'a@agc.com',
                  enterpriseId: '141598637888113837',
                  gender: 'FEMALE',
                  id: '218052603399897195',
                  idNumber: '110231199008174110',
                  isSubscriber: false,
                  name: 'abc',
                  numbers: ['16888888888', '15799990000'],
                  remark: 'aaaaaaaaa',
                  tags: ['a', 'b', 'c'],
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    async handleDelete() {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
    },

    handleShowAddEdit(item) {
      this.selectedRow = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
    handleShowImport() {
      this.showImport = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
